import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Image
} from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import Style from '../utils/style/style';
import Constant from '../utils/Constant';
export default class GoodItem extends Component {
    constructor(props) {
        super(props)
    };
    _renderDetail(item) {
        return (
            <View style={styles.detailItem} key={item.key}>
                <View><Text style={styles.textKey}> {item.key}:</Text></View>
                <View><Text style={[Style.f13, { color: item.color ? item.color : '#999' }]}>{item.value}</Text></View>
            </View>
        )

    }
    render() {
        const { detailList, source, name, showAngle, noBorder } = this.props;
        const HOST = Constant.HOST;
        return (
            <TouchableOpacity style={styles.container} onPress={this.props.pressItem} activeOpacity={1}>
                <View style={[styles.wrapper, noBorder ? styles.noBorder : '']}>
                    {/* <Image sytle={styles.Image} source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }} /> */}
                    <Image
                        style={styles.image}
                        source={{ uri: HOST+source }}
                    />
                    <View style={[Style.dfc, Style.jssa, Style.aifs]}>
                        <View><Text style={styles.name} numberOfLines={1}>{name}</Text></View>
                        <View style={styles.detailList}>
                            {
                                detailList.map((detail, index) =>
                                    this._renderDetail(detail)
                                )
                            }
                        </View>
                    </View>
                    {
                        !showAngle ? null :
                            <View style={[styles.angleRight, Style.aic, Style.jsfa]}>
                                <View style={[styles.icon]}>
                                    <Icon name="angle-right" size={30}></Icon>
                                </View>
                            </View>
                    }
                </View>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        width: Style.width,
        height: 87,
        justifyContent: 'center',

    },
    wrapper: {
        marginLeft: 10,
        borderStyle: 'solid',
        borderColor: '#e5e5e5',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        // justifyContent: 'space-between',
        paddingRight: 10,
    },
    noBorder: {
        borderBottomWidth: 0,
    },
    image: {
        // flex: 1,
        width: 60,
        height: 60,
        marginRight: 10,
    },
    name: {
        fontSize: 17,
        color: '#000',
        width: 250,
    },
    detailList: {
        // flex: 1,
        width: 250,
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    detailItem: {
        width: 100,
        height: 20,
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 20
    },
    textKey: {
        fontSize: 13,
        color: '#999'
    },
    angleRight: {
        margin: 0,
        width: 30,
    },
    icon: {
        marginRight: 10
    },
    iconText: {
        fontSize: 13,
        marginLeft: 3
    }
})